<template>
  <div class="">
    <el-dialog class="m_dialog" title="操作日志详情" :visible.sync="dialogVisible" width="800" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <div class="content">
        <CustomTitle title="基本信息"></CustomTitle>
        <BaseDescriptions :descConfig="descConfig" :descConfigItem="descConfigItem" :descModel="descModel">
          <template #num>
            <span>{{ descModel.num + ' 个' }}</span>
          </template>
        </BaseDescriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDeviceTypesData, getDeviceTypesData, addDeviceTypesData, updateDeviceTypesData, delDeviceTypesData } from '@/api/system/device/types';
import { mapState } from 'vuex';
import BaseDescriptions from '@/components/PageContent/BaseDescriptions.vue';
export default {
  name: 'DeviceTypesDetail',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    titleIndex: {
      type: Number | String,
      default: 0,
    },
    descData: {
      type: Object,
      default: () => { },
    },
    dictMap: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      descConfig: {
        size: 'medium',
        column: '2',
      },
      descModel: {
        pid: '',
        deviceTypeId: '',
        deviceTypeKey: '',
        deviceTypeName: '',
        sort: 0,
        num: '',
        remark: ''
      },
      descConfigItem: [
        {
          fieIdName: 'deviceTypeKey',
          label: '设备类型字符串',
          span: 2,
        },
        {
          fieIdName: 'deviceTypeName',
          label: '设备类型名称',
          span: 2
        },
        // {
        //   fieIdName: 'num',
        //   label: '设备分类对应的数量',
        //   span: 2,
        //   slotName: "num"
        // },
        {
          fieIdName: 'sort',
          label: '排序',
          span: 2,
        },
        {
          fieIdName: 'remark',
          label: '备注',
          span: 2
        },
      ],
    };
  },
  computed: {
    ...mapState('dialog', ['dialogTitles']),
  },
  watch: {
    descData: {
      deep: true,
      immediate: true,
      handler() {
        this.descModel = JSON.parse(JSON.stringify(this.descData));
      },
    },
  },
  created() { },
  mounted() { },
  methods: {
    cancel() {
      this.$emit('cancel');
    },
  },
  components: {
    BaseDescriptions,
  },
};
</script>

<style lang="less" scoped></style>
